<template>
  <div class="business-detail">
    <!-- 轮播图 -->
    <div class="business-detail-swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航栏 -->
    <div>
      <div class="business-detail-tab">
        <van-nav-bar
          title="商机详情"
          left-text
          left-arrow
          class="custom-nav-bar"
          @click-left="onClickLeft"
        />
      </div>
    </div>
    <!-- 内容 -->
    <div
      class="business-detail-content"
      :style="{ paddingBottom: type === 'intention' ? '60px' : '0' }"
    >
      <!-- 顶部内容 -->
      <div class="business-detail-content-tip">
        <!-- 标题 -->
        <div class="title">提供设备及零部件</div>
        <!-- 内容及地址 -->
        <div class="content">
          <div class="left">
            <img src="@/assets/images/floor.png" alt="" />
            <span>徐工集团</span>
          </div>
          <div class="right">
            <van-icon name="location-o" />
            <span>北京-北京</span>
          </div>
        </div>
        <!-- 产品类型 -->
        <div class="type">
          <bob-label labelText="产品"></bob-label>
          <bob-label labelText="融资"></bob-label>
        </div>
        <!-- 分割线 -->
        <van-divider />
        <!-- 底部详情 -->
        <div class="bottom">
          <div class="detials">
            <div class="time">2024-08-15</div>
            <div class="text">发布日期</div>
          </div>
          <div class="detials">
            <div class="time">30天</div>
            <div class="text">有效期</div>
          </div>
          <div class="detials">
            <div class="time">
              <span>3</span>
              <span>天</span>
            </div>
            <div class="text">剩余天数</div>
          </div>
        </div>
      </div>
      <!-- 商品信息 -->
      <bob-card title="商品信息">
        <van-cell
          v-for="item in goodsInfoCard"
          :title="item.title"
          :value="item.content"
        />
      </bob-card>
      <bob-card title="商品描述">
        <p>
          我公司依靠欧洲总公司和国内公司的紧密合作，依靠多年服务积累的丰富经验，为中欧企业的贸易往来提供全程服务。我们有在机械，零部件，生产建筑，化工，金属，电子设备等的代理经验。如果您有在欧洲采购的需求，需要引进欧洲的产品到中我们将会在最短的时间内寻找合适的供应商国，同时我们提供专业的技术评估，为您准备相关进口所需的手续及文件，帮助您高效引进欧洲品牌及产品。
        </p>
      </bob-card>
      <!-- 企业详情 -->
      <bob-card title="企业详情">
        <van-cell
          v-for="item in goodsInfoCard"
          :title="item.title"
          :value="item.content"
        />
      </bob-card>
    </div>
    <!-- 底部信息 -->
    <div class="business-detail-bottom" v-if="type === 'intention'">
      <van-button type="primary" @click="dialog">发送意向</van-button>
    </div>

    <!-- 弹层 -->
    <van-dialog
      v-model:show="showDialog"
      title="发送意向"
      show-cancel-button
      @confirm="onConfirm"
      @cancel="onCancel"
      :before-close="beforeClose"
    >
      <div class="dialog">
        <van-form ref="dialogFrom">
          <van-cell-group inset>
            <van-field
              v-model="result"
              is-link
              readonly
              name="picker"
              placeholder="点击选择城市"
              :rules="[{ required: true, message: '请填写用户名' }]"
              @click="showPicker = true"
            />
          </van-cell-group>

          <van-cell-group inset>
            <van-field
              v-model="message"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请简要描述您的交易意向"
              :rules="[{ required: true, message: '请填写交易意向' }]"
              show-word-limit
              class="text"
            />
          </van-cell-group>
        </van-form>
      </div>
    </van-dialog>
    <!-- 弹出框下拉菜单 -->
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker
        :columns="columns"
        @confirm="pullBtn"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
// 路由回跳
const onClickLeft = () => history.back();
// 携带参数
const route = useRoute();
const type = route.query.type; // 获取查询参数 `type`

// 测试数据-商品信息
const goodsInfoCard = ref([
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
]);

// 根据值判断是否添加下边距

const showDialog = ref(false);
// 打开弹出框
const dialog = () => {
  showDialog.value = true;
};
const beforeClose = () => {
  return false;
};
// 弹框内容
const dialogFrom = ref();
const result = ref(""); //选中内容
const message = ref(""); //输入框内容
const showPicker = ref(false);
const columns = [
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
  { text: "温州", value: "Wenzhou" },
  { text: "绍兴", value: "Shaoxing" },
  { text: "湖州", value: "Huzhou" },
];

const pullBtn = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  showPicker.value = false;
};

// 弹窗确认
const onConfirm = async () => {
  await dialogFrom.value.validate();
  console.log(result.value, message.value);
  showDialog.value = false;
};
// 关闭弹窗
const onCancel = () => {
  showDialog.value = false;
};
</script>

<style lang="scss" scoped>
.business-detail {
  /* .van-hairline--bottom:after {
    border-bottom-width: 0;
  } */
  &-swipe {
    position: relative;
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 375px;
      text-align: center;
      background-color: #39a9ed;
    }
    :deep(.van-swipe__indicators) {
      bottom: 50px;
      .van-swipe__indicator--active {
        width: 20px;
        border-radius: 5px;
        background-color: var(--van-primary-color) !important;
      }
    }
  }
  &-tab {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10;
    .custom-nav-bar {
      background-color: transparent;
      &::after {
        border-bottom-width: 0;
      }
    }
  }
  &-content {
    position: absolute;
    left: 0;
    top: 340px;
    min-height: 100px;
    width: 100%;
    background-color: white;
    border-radius: 20px 20px 0 0;
    background-color: #f2f3f5;
    /* padding-bottom: 60px; */
    &-tip {
      padding: 16px;
      background-color: white;
      margin-bottom: 15px;
      border-radius: 20px 20px 0 0;
      .title {
        font-size: 17px;
        color: #222222;
        padding-bottom: 5px;
        font-weight: 500;
      }
      .content {
        display: flex;
        font-size: 12px;
        padding-bottom: 10px;
        div {
          margin-right: 30px;
        }
      }
      .type {
        display: flex;
        font-size: 12px;
        margin-bottom: 8px;
        .card {
          margin-right: 10px;
        }
      }
      .type:first-child {
        margin-right: 3px;
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
        .detials {
          text-align: center;
          .time {
            font-weight: 500;
            font-size: 15px;
            color: #1d2129;
            margin-bottom: 6px;
          }
          .text {
            font-size: 15px;
            color: #86909c;
          }
          span:first-child {
            color: var(--van-primary-color);
          }
        }
      }
    }
    .van-cell {
      padding: 0 0 16px 0;
      font-size: 15px;
    }
    :deep(.van-cell__title) {
      color: #86909c;
    }
    :deep(.van-cell__value) {
      color: #1d2129;
    }
    .van-cell::after {
      content: none;
    }
    .bob-card {
      margin-bottom: 16px;
      p {
        font-size: 15px;
        color: #1d2129;
      }
    }
  }
  &-bottom {
    background-color: white;
    width: 100%;
    height: 60px;
    margin-top: 16px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      width: 343px;
      height: 40px;
      border-radius: 100px;
      text-align: center;
    }
  }
  .dialog {
    .text {
      background-color: #f7f8fa;
    }
  }
}
</style>

